<template>
  <el-container>
    <el-header style="background-color:orange">
      <el-breadcrumb  separator="/"  style="text-align:center">
        <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 30px">首页</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size:30px;color:white">公告详情</el-breadcrumb-item>
      </el-breadcrumb>

    </el-header>
    <el-main>
      <div style="width: 480px;height: 60px; position: relative; left:500px;top: 20px">
        <el-form :inline="true" :model="AnnTable" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="AnnTable.title" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="oubminSt">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="position: relative;top: 20px" v-show="async">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">
          <el-table-column type="selection" width="155">
          </el-table-column>
          <el-table-column prop="id" label="编号" width="155">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="155">
          </el-table-column>
          <el-table-column  label="照片" width="220">
            <template slot-scope="scope" >
          <el-image style="width: 100px; height: 100px" :src="scope.row.path" fit="fill"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="280">
            <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="info" icon="el-icon-message" @click="OpenSelectConfirm(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="position: relative;top: 20px"  v-show="asynct">
        <el-table
            ref="multipleTable"
            :data="announcements"
            tooltip-effect="dark"
            style="width: 100%">
          <el-table-column type="selection" width="155">
          </el-table-column>
          <el-table-column prop="id" label="编号" width="155">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="155">
          </el-table-column>
          <el-table-column  label="照片" width="220">
            <template slot-scope="scope" >
              <el-image style="width: 100px; height: 100px" :src="scope.row.path" fit="fill"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="280">
            <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="info" icon="el-icon-message" @click="OpenSelectConfirm(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="position: relative;top: 20px" v-show="assert">
        <el-table
            ref="multipleTable"
            :data="announcementss"
            tooltip-effect="dark"
            style="width: 100%">
          <el-table-column type="selection" width="155">
          </el-table-column>
          <el-table-column prop="id" label="编号" width="155">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="155">
          </el-table-column>
          <el-table-column  label="照片" width="220">
            <template slot-scope="scope" >
              <el-image style="width: 100px; height: 100px" :src="scope.row.path" fit="fill"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="详情" width="280">
            <template slot-scope="scope">{{ scope.row.message}}</template>
          </el-table-column>
          <el-table-column label="日期" width="280">
            <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      async:'',
      asynct:'',
      assert:'',
      AnnTable:{
           title:''
      },
      tableData:[{id:1,title:"警告",path:require('../imgs/f.jpg'),gmtCreate:'2020-5-26'}],
      announcements:[{}],
      announcementss:[{}]
    }
  },
  methods:{
    oubminSt() {
      console.log('submit!');
      console.log('准备从服务器端加载【公告】……');
      let url = 'http://localhost:9999/ann/get/'+this.AnnTable.title;
              this.async=false;
              this.asynct=true;
              this.assert=false;
              console.log(this.assert,this.async,this.asynct)
      console.log('请求路径：' + url);
      this.axios
          .get(url)
          .then((response) => {
            let responseBody = response.data;
            console.log('接收到服务器端响应的结果：');
            console.log(responseBody);
            this.announcements= responseBody.data;
            console.log(this.announcements)
          });
    },
    OpenSelectConfirm(id){
      let url = 'http://localhost:9999/ann/'+id;
      this.assert=true;
      console.log('请求路径：' + url);
      this.axios
          .get(url)
          .then((response) => {
               this.async=false;
               this.asynct=false;
               this.assert=true;
            console.log(this.assert,this.async,this.asynct)
            let responseBody = response.data;
            console.log('接收到服务器端响应的结果：');
            console.log(responseBody);
            this.announcementss= responseBody.data;
            console.log(this.announcementss)
          });
    },
    loadRoleList() {
      console.log('准备从服务器端加载【公告列表】……');
      let url = 'http://localhost:9999/ann/list';
      console.log('请求路径：' + url);
      this.axios
          .get(url)
          .then((response) => {
            let responseBody = response.data;
            console.log('接收到服务器端响应的结果：');
            console.log(responseBody);
            this.tableData = responseBody.data;
            this.async=true;
            this.asynct=false;
            this.assert=false;
            console.log(this.assert,this.async,this.asynct)
          });
    }
  },
  mounted(){
    console.log('mounted');
    this.loadRoleList();
  }
}
</script>
<style>
.el-main {
  padding: 0px;
}
</style>